<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商家中心 - 订单管理</title>

    <!-- 外部资源加载顺序 -->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        gray: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto { content-visibility: auto; }
            .btn-primary { @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .btn-success { @apply bg-success hover:bg-success/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .btn-warning { @apply bg-warning hover:bg-warning/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .btn-danger { @apply bg-danger hover:bg-danger/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .btn-outline { @apply border border-gray-300 hover:border-primary text-gray-600 hover:text-primary font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .table-cell-ellipsis { @apply overflow-hidden text-ellipsis whitespace-nowrap; }
            .loading-skeleton { @apply bg-gray-100 animate-pulse rounded; }
            /* 分页相关工具类 */
            .page-item { @apply w-10 h-10 flex items-center justify-center rounded-lg transition-all duration-200 text-sm; }
            .page-item-active { @apply bg-primary text-white font-medium; }
            .page-item-disabled { @apply opacity-50 cursor-not-allowed text-gray-400; }
            .page-item-hover { @apply hover:bg-gray-100 hover:text-primary; }
        }
    </style>

    <!-- v-cloak样式确保未编译模板不显示 -->
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>

<body class="bg-gray-100 min-h-screen flex flex-col">
<div id="app" v-cloak>
    <!-- 顶部导航 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-briefcase text-primary text-2xl mr-2"></i>
                <h1 class="text-xl font-bold text-gray-700">商家管理中心</h1>
            </div>
            <div class="flex items-center gap-4">
                <!-- 消息通知 -->
                <div class="relative">
                    <button class="flex items-center text-gray-600 hover:text-primary transition-colors">
                        <i class="fa fa-bell-o text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs w-4 h-4 rounded-full flex items-center justify-center" v-if="merchantInfo.unreadMsgCount > 0">
                        {{ merchantInfo.unreadMsgCount }}
                    </span>
                    </button>
                </div>

                <!-- 商家信息 -->
                <div class="flex items-center gap-2">
                    <img src="https://picsum.photos/200/200" alt="商家头像" class="w-8 h-8 rounded-full object-cover">
                    <span class="text-gray-600">shopEasy店</span>
                    <i class="fa fa-angle-down text-gray-400"></i>
                </div>

                <!-- 退出登录 -->
                <a href="../index.html"><button class="text-gray-600 hover:text-danger transition-colors" onclick="util.logout()">
                    <i class="fa fa-sign-out"></i>
                    <span class="ml-1">退出登录</span>
                </button></a>
            </div>
        </div>
    </header>

    <!-- 主体内容：侧边栏 + 主内容区 -->
    <div class="flex-grow flex">
        <!-- 侧边栏导航 -->
        <aside class="w-64 bg-white shadow-sm h-[calc(100vh-64px)] sticky top-16">
            <nav class="py-4">
                <div class="px-4 py-2 text-xs font-medium text-gray-400">核心功能</div>
                <a href="dashboard.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                    <i class="fa fa-tachometer mr-3"></i>
                    <span>仪表盘</span>
                </a>
                <a href="product-list.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                    <i class="fa fa-cubes mr-3"></i>
                    <span>商品管理</span>
                </a>
                <a href="order-list.html" class="flex items-center px-4 py-3 text-primary bg-primary/5 border-l-4 border-primary">
                    <i class="fa fa-list-alt mr-3"></i>
                    <span>订单管理</span>
                </a>
                <div class="px-4 py-2 mt-4 text-xs font-medium text-gray-400">店铺设置</div>
                <a href="shop-setting.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                    <i class="fa fa-cog mr-3"></i>
                    <span>店铺设置</span>
                </a>
                <a href="account-setting.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                    <i class="fa fa-user mr-3"></i>
                    <span>账号设置</span>
                </a>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-grow p-6">
            <!-- 页面标题与操作区 -->
            <div class="mb-6 flex flex-col md:flex-row md:justify-between md:items-center gap-4">
                <div>
                    <h2 class="text-xl font-bold text-gray-700">订单管理</h2>
                    <p class="text-gray-400 mt-1">查看和管理店铺所有订单信息</p>
                </div>
                <div class="flex gap-3">
                    <button class="btn-primary" @click="refreshOrderList">
                        <i class="fa fa-refresh mr-1"></i>
                        <span>刷新订单</span>
                    </button>
                </div>
            </div>

            <!-- 搜索与筛选区 -->
            <div class="bg-white rounded-xl p-6 shadow-sm mb-6">
                <form @submit.prevent="handleSearch" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <!-- 订单编号搜索 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">订单编号</label>
                        <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-search"></i>
                        </span>
                            <input
                                    type="text"
                                    placeholder="请输入订单编号"
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none transition-all"
                                    v-model="searchForm.orderNo"
                            >
                        </div>
                    </div>

                    <!-- 订单状态筛选 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">订单状态</label>
                        <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-filter"></i>
                        </span>
                            <select
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none transition-all appearance-none bg-white"
                                    v-model="searchForm.status"
                            >
                                <option value="">全部状态</option>
                                <option value="1">待付款</option>
                                <option value="2">待发货</option>
                                <option value="3">待收货</option>
                                <option value="4">已完成</option>
                                <option value="5">已取消</option>
                                <option value="6">售后中</option>
                            </select>
                            <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 pointer-events-none">
                            <i class="fa fa-angle-down"></i>
                        </span>
                        </div>
                    </div>

                    <!-- 开始日期 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                        <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-calendar"></i>
                        </span>
                            <input
                                    type="date"
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none transition-all"
                                    v-model="searchForm.startDate"
                            >
                        </div>
                    </div>

                    <!-- 结束日期 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
                        <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-calendar"></i>
                        </span>
                            <input
                                    type="date"
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none transition-all"
                                    v-model="searchForm.endDate"
                            >
                        </div>
                    </div>

                    <!-- 搜索按钮 -->
                    <div class="md:col-span-4 flex justify-end gap-3 pt-2">
                        <button type="button" class="btn-outline" @click="resetSearch">
                            <i class="fa fa-refresh mr-1"></i>
                            <span>重置</span>
                        </button>
                        <button type="submit" class="btn-primary" :disabled="isSearching">
                            <i class="fa fa-search mr-1"></i>
                            <span v-if="!isSearching">搜索</span>
                            <span v-if="isSearching">搜索中...</span>
                        </button>
                    </div>
                </form>
            </div>

            <!-- 订单列表 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <!-- 加载状态 -->
                <div class="p-10 text-center" v-if="isLoading && orderList.length === 0">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4"></div>
                    <p class="text-gray-500">正在加载订单数据...</p>
                </div>

                <!-- 空状态 -->
                <div class="p-10 text-center" v-if="!isLoading && orderList.length === 0">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 text-gray-400 mb-4">
                        <i class="fa fa-list-alt text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-700">暂无订单数据</h3>
                    <p class="text-gray-500 mt-2">没有找到符合条件的订单，请尝试调整筛选条件</p>
                </div>

                <!-- 订单表格 -->
                <div class="overflow-x-auto" v-if="orderList.length > 0">
                    <table class="w-full text-left">
                        <thead>
                        <tr class="border-b border-gray-200 bg-gray-50">
                            <th class="py-4 px-6 text-sm font-medium text-gray-500">订单编号</th>
                            <th class="py-4 px-6 text-sm font-medium text-gray-500">下单时间</th>
                            <th class="py-4 px-6 text-sm font-medium text-gray-500">买家信息</th>
                            <th class="py-4 px-6 text-sm font-medium text-gray-500">订单金额</th>
                            <th class="py-4 px-6 text-sm font-medium text-gray-500">订单状态</th>
                            <th class="py-4 px-6 text-sm font-medium text-gray-500">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 订单列表项（循环渲染） -->
                        <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
                            v-for="order in orderList" :key="order.id"
                            :class="{ 'opacity-50': order.isProcessing }">
                            <td class="py-4 px-6">
                                <div class="font-medium text-gray-700">{{ order.id }}</div>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ formatDate(order.createTime) }}</td>
                            <td class="py-4 px-6">
                                <div class="font-medium text-gray-700">用户ID: {{ order.userId }}</div>
                                <div class="text-xs text-gray-500 mt-1">支付方式: {{ getPaymentTypeText(order.paymentType) }}</div>
                            </td>
                            <!-- 修复：添加了对totalFee的存在性检查 -->
                            <td class="py-4 px-6 text-sm font-medium text-gray-700">
                                ¥{{ order.totalFee !== undefined ? (order.totalFee / 100).toFixed(2) : '0.00' }}
                            </td>
                            <td class="py-4 px-6">
                            <span
                                    class="px-2 py-1 text-xs rounded-full"
                                    :class="getOrderStatusClass(order.status)"
                            >
                                {{ getOrderStatusText(order.status) }}
                            </span>
                            </td>
                            <td class="py-4 px-6">
                                <div class="flex gap-2">
                                    <!-- 订单详情 -->
<!--                                    <a :href="`../orderDetail.html?orderId=${order.id}`"-->
<!--                                       class="text-primary hover:underline text-sm flex items-center"-->
<!--                                       :disabled="order.isProcessing"-->
<!--                                       :class="{ 'opacity-50 cursor-not-allowed': order.isProcessing }">-->
                                        <button class="text-primary hover:underline text-sm flex items-center" @click="viewOrderDetail(order.id)">
                                        <i class="fa fa-eye mr-1" >详情</i>
                                    </button>

                                    <!-- 发货操作（仅待发货状态显示） -->
                                    <button
                                            v-if="order.status === 2"
                                            class="text-success hover:underline text-sm flex items-center"
                                            @click="submitShipInfo(order.id)"
                                            :disabled="order.isProcessing"
                                            :class="{ 'opacity-50 cursor-not-allowed': order.isProcessing }"
                                    >

                                        <i class="fa fa-truck mr-1"></i>发货
                                    </button>

                                    <!-- 取消订单（仅待付款状态显示） -->
                                    <button
                                            v-if="order.status === 1"
                                            class="text-warning hover:underline text-sm flex items-center"
                                            @click="confirmCancelOrder(order.id)"
                                            :disabled="order.isProcessing"
                                            :class="{ 'opacity-50 cursor-not-allowed': order.isProcessing }"
                                    >
                                        <i class="fa fa-times-circle mr-1"></i>取消
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页组件 -->
                <div class="px-6 py-4 border-t border-gray-200 flex flex-col md:flex-row md:justify-between md:items-center gap-4"
                     v-if="orderList.length > 0">
                    <div class="text-sm text-gray-500">
                        共 <span class="font-medium text-gray-700">{{ pagination.total }}</span> 个订单，
                        当前显示第 <span class="font-medium text-gray-700">{{ pagination.currentPage }}</span> 页，
                        共 <span class="font-medium text-gray-700">{{ pagination.totalPages }}</span> 页
                    </div>

                    <!-- 分页条 -->
                    <div class="flex items-center gap-1">
                        <!-- 首页按钮 -->
                        <button
                                class="page-item page-item-hover"
                                :class="{ 'page-item-disabled': pagination.currentPage === 1 }"
                                :disabled="pagination.currentPage === 1"
                                @click="changePage(1)"
                        >
                            <i class="fa fa-angle-double-left"></i>
                        </button>

                        <!-- 上一页按钮 -->
                        <button
                                class="page-item page-item-hover"
                                :class="{ 'page-item-disabled': pagination.currentPage === 1 }"
                                :disabled="pagination.currentPage === 1"
                                @click="changePage(pagination.currentPage - 1)"
                        >
                            <i class="fa fa-angle-left"></i>
                        </button>

                        <!-- 页码按钮 - 动态生成合理范围的页码 -->
                        <button
                                v-for="page in getPageNumbers()"
                                :key="page"
                                class="page-item page-item-hover"
                                :class="{ 'page-item-active': pagination.currentPage === page }"
                                @click="changePage(page)"
                        >
                            {{ page }}
                        </button>

                        <!-- 下一页按钮 -->
                        <button
                                class="page-item page-item-hover"
                                :class="{ 'page-item-disabled': pagination.currentPage === pagination.totalPages }"
                                :disabled="pagination.currentPage === pagination.totalPages"
                                @click="changePage(pagination.currentPage + 1)"
                        >
                            <i class="fa fa-angle-right"></i>
                        </button>

                        <!-- 末页按钮 -->
                        <button
                                class="page-item page-item-hover"
                                :class="{ 'page-item-disabled': pagination.currentPage === pagination.totalPages }"
                                :disabled="pagination.currentPage === pagination.totalPages"
                                @click="changePage(pagination.totalPages)"
                        >
                            <i class="fa fa-angle-double-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4 text-center text-sm text-gray-500">
            © 2023 ShopEasy 商家管理系统 - 版权所有
        </div>
    </footer>

    <!-- 取消订单确认弹窗 -->
    <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" v-if="showCancelConfirm">
        <div class="bg-white rounded-xl w-full max-w-md p-6 shadow-lg">
            <h3 class="text-lg font-medium text-gray-700 mb-4">确认取消订单</h3>
            <p class="text-gray-500 mb-6">您确定要取消该订单吗？取消后将无法恢复。</p>
            <div class="flex justify-end gap-3">
                <button class="btn-outline" @click="showCancelConfirm = false">取消</button>
                <button class="btn-danger" @click="handleCancelOrder">确认取消</button>
            </div>
        </div>
    </div>

    <!-- 发货弹窗 -->
    <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" v-if="showShipModal">
        <div class="bg-white rounded-xl w-full max-w-md p-6 shadow-lg">
            <h3 class="text-lg font-medium text-gray-700 mb-4">订单发货</h3>
            <div class="space-y-4 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">物流公司</label>
                    <input
                            type="text"
                            placeholder="请输入物流公司名称"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none transition-all"
                            v-model="shipForm.logisticsCompany"
                    >
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">物流单号</label>
                    <input
                            type="text"
                            placeholder="请输入物流单号"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none transition-all"
                            v-model="shipForm.logisticsNo"
                    >
                </div>
            </div>
            <div class="flex justify-end gap-3">
                <button class="btn-outline" @click="showShipModal = false">取消</button>
                <button class="btn-success" @click="submitShipInfo">确认发货</button>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 商家信息
                merchantInfo: {
                    unreadMsgCount: 0
                },
                // 订单列表数据
                orderList: [],
                // 搜索表单
                searchForm: {
                    orderNo: '',
                    status: '',
                    startDate: '',
                    endDate: ''
                },
                // 分页信息
                pagination: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    totalPages: 0,
                    start: 0
                },
                // 加载状态
                isLoading: false,
                isSearching: false,
                // 弹窗状态
                showCancelConfirm: false,
                showShipModal: false,
                // 当前操作的订单ID
                currentOrderId: null,
                // 发货表单数据
                shipForm: {
                    logisticsCompany: '',
                    logisticsNo: ''
                }
            }
        },
        mounted() {
            // 页面加载时获取订单列表
            this.getOrderList();
            // 获取商家信息
            this.getMerchantInfo();
        },
        methods: {
            viewOrderDetail(orderId) {
        console.log(orderId)
        window.location.href = `../orderDetail.html?orderId=${orderId}`;
    },
            // 获取订单列表
            getOrderList() {
                this.isLoading = true;
                // 构造请求参数
                const params = {
                    page: this.pagination.currentPage,
                    size: this.pagination.pageSize,
                    orderNo: this.searchForm.orderNo,
                    status: this.searchForm.status,
                    startDate: this.searchForm.startDate,
                    endDate: this.searchForm.endDate
                };

                // 发送请求获取订单数据
                axios.get('/orders', { params })
                    .then(response => {
                        const result = response;
                        if (result.success && result.data) {
                            // 处理订单数据，添加isProcessing状态，并确保totalFee存在
                            this.orderList = result.data.list.map(order => ({
                                ...order,
                                isProcessing: false,
                                // 确保totalFee有默认值
                                totalFee: order.totalFee || 0
                            }));
                            // 更新分页信息
                            this.pagination.total = Number(result.data.total) || 0;
                            this.pagination.totalPages = Number(result.data.pages) || 0;
                            this.pagination.start = (this.pagination.currentPage - 1) * this.pagination.pageSize + 1;
                        } else {
                            this.orderList = [];
                            this.pagination.total = 0;
                            this.pagination.totalPages = 0;
                            alert('获取订单失败: ' + (result.message || '未知错误'));
                        }
                    })
                    .catch(error => {
                        console.error('获取订单失败', error);
                        alert('网络错误，获取订单失败');
                        this.orderList = [];
                    })
                    .finally(() => {
                        this.isLoading = false;
                    });
            },

            // 获取商家信息
            getMerchantInfo() {
                // 实际项目中应该从接口获取
                setTimeout(() => {
                    this.merchantInfo = {
                        unreadMsgCount: 3
                    };
                }, 500);
            },

            // 搜索订单
            handleSearch() {
                this.pagination.currentPage = 1; // 重置到第一页
                this.isSearching = true;
                this.getOrderList().finally(() => {
                    this.isSearching = false;
                });
            },

            // 重置搜索条件
            resetSearch() {
                this.searchForm = {
                    orderNo: '',
                    status: '',
                    startDate: '',
                    endDate: ''
                };
            },

            // 刷新订单列表
            refreshOrderList() {
                this.getOrderList();
            },

            // 切换页码
            changePage(page) {
                if (page < 1 || page > this.pagination.totalPages) return;
                this.pagination.currentPage = page;
                this.getOrderList();
            },

            // 生成合理范围的页码
            getPageNumbers() {
                const pages = [];
                const totalPages = this.pagination.totalPages;
                const currentPage = this.pagination.currentPage;

                // 总是显示第一页
                pages.push(1);

                // 显示当前页附近的页码
                if (currentPage > 2) {
                    pages.push('...');
                }

                if (currentPage > 1 && currentPage < totalPages) {
                    pages.push(currentPage);
                }

                if (currentPage > 0 && currentPage < totalPages - 1) {
                    pages.push(currentPage + 1);
                }

                // 显示最后一页（如果不是第一页）
                if (totalPages > 1) {
                    if (currentPage < totalPages - 1) {
                        pages.push('...');
                    }
                    pages.push(totalPages);
                }

                return pages;
            },

            // 格式化日期
            formatDate(dateString) {
                if (!dateString) return '';
                const date = new Date(dateString);
                return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                }).replace(/\//g, '-');
            },

            // 获取订单状态文本
            getOrderStatusText(status) {
                const statusMap = {
                    1: '待付款',
                    2: '待发货',
                    3: '待收货',
                    4: '已完成',
                    5: '已取消',
                    6: '售后中'
                };
                return statusMap[status] || '未知状态';
            },

            // 获取订单状态样式
            getOrderStatusClass(status) {
                const classMap = {
                    1: 'bg-warning/10 text-warning',
                    2: 'bg-primary/10 text-primary',
                    3: 'bg-primary/10 text-primary',
                    4: 'bg-success/10 text-success',
                    5: 'bg-gray-100 text-gray-500',
                    6: 'bg-danger/10 text-danger'
                };
                return classMap[status] || 'bg-gray-100 text-gray-500';
            },

            // 获取支付方式文本
            getPaymentTypeText(type) {
                const typeMap = {
                    1: '支付宝支付',
                    2: '微信支付',
                    3: '余额支付'
                };
                return typeMap[type] || '未知支付方式';
            },

            // 确认取消订单
            confirmCancelOrder(orderId) {
                this.currentOrderId = orderId;
                this.showCancelConfirm = true;
            },

            // 处理取消订单
            handleCancelOrder() {
                const order = this.orderList.find(item => item.id === this.currentOrderId);
                if (order) {
                    order.isProcessing = true;
                }

                // 发送取消订单请求
                axios.post(`/api/orders/${this.currentOrderId}/cancel`)
                    .then(response => {
                        const result = response.data;
                        if (result.success) {
                            alert('订单取消成功');
                            this.getOrderList(); // 重新加载订单列表
                        } else {
                            alert('取消订单失败: ' + (result.message || '未知错误'));
                        }
                    })
                    .catch(error => {
                        console.error('取消订单失败', error);
                        alert('网络错误，取消订单失败');
                    })
                    .finally(() => {
                        this.showCancelConfirm = false;
                        this.currentOrderId = null;
                        if (order) {
                            order.isProcessing = false;
                        }
                    });
            },

            // 处理发货
            handleShip(order) {
                this.currentOrderId = order.id;
                this.shipForm = {
                    logisticsCompany: '',
                    logisticsNo: ''
                };
                this.showShipModal = true;
            },

            // 提交发货信息
            submitShipInfo(orderId) {
                // if (!this.shipForm.logisticsCompany || !this.shipForm.logisticsNo) {
                //     alert('请填写物流公司和物流单号');
                //     return;
                // }
                //
                // const order = this.orderList.find(item => item.id === this.currentOrderId);
                // if (order) {
                //     order.isProcessing = true;
                // }

                // 发送发货请求
                axios.get(`/orders/${orderId}/ship`)
                    .then(response => {
                        const result = response;
                        if (result.success) {
                            alert('发货成功');
                            this.getOrderList(); // 重新加载订单列表
                        } else {
                            alert('发货失败: ' + (result.message || '未知错误'));
                        }
                    })
                    .catch(error => {
                        console.error('发货失败', error);
                        alert('网络错误，发货失败');
                    })
                    .finally(() => {
                        this.showShipModal = false;
                        this.currentOrderId = null;
                        if (order) {
                            order.isProcessing = false;
                        }
                    });
            }
        }
    });
</script>
</body>
</html>
